<template>
    <div>
        基于tiptap实现的正真富文本
        <div v-if="editor" class="tiptap">
        <button class="btn" @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
        加粗
        </button>
        <button class="btn" @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
        倾斜
        </button>
        <button class="btn" @click="editor.chain().focus().toggleStrike().run()" :disabled="!editor.can().chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
        删除线
        </button>
        <button class="btn" @click="editor.chain().focus().toggleCode().run()" :disabled="!editor.can().chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
        代码
        </button>
        <button class="btn" @click="editor.chain().focus().unsetAllMarks().run()">
        清除标记
        </button>
        <button class="btn" @click="editor.chain().focus().clearNodes().run()">
        清除节点
        </button>
        <button class="btn" @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
        段落
        </button>
        <button class="btn" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
        h1
        </button>
        <button class="btn" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
        h2
        </button>
        <button class="btn" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
        h3
        </button>
        <button class="btn" @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
        h4
        </button>
        <button class="btn" @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
        h5
        </button>
        <button class="btn" @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
        h6
        </button>
        <button class="btn" @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
        无序列表
        </button>
        <button class="btn" @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
        有序列表
        </button>
        <button class="btn" @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
        代码块
        </button>
        <button class="btn" @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
        引用
        </button>
        <button class="btn" @click="editor.chain().focus().setHorizontalRule().run()">
        水平线
        </button>
        <button class="btn" @click="editor.chain().focus().setHardBreak().run()">
        换行
        </button>
        <button class="btn" @click="editor.chain().focus().undo().run()" :disabled="!editor.can().chain().focus().undo().run()">
        撤销
        </button>
        <button class="btn" @click="editor.chain().focus().redo().run()" :disabled="!editor.can().chain().focus().redo().run()">
        重做
        </button>
    </div>
        <editor-content :editor="editor" />
    </div>
</template>

<script setup>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import contents from './content'

const editor = ref(null)

nextTick( () => {
    editor.value = new Editor({
        content: contents,
        extensions: [
            StarterKit,
        ],
    })
})
onBeforeUnmount(() => {
   editor.value.destroy()  
})
</script>

<style lang="scss" src="./style.scss"></style>

